// var app = new Vue({
//     el: '#app',
//     data:{
//
//     },
//     methods:{
//
//     },
//     beforeCreate: function () {
//         var dom = document.getElementById("container_two");
//         var myChart = echarts.init(dom);
//         setTimeout(function () {
//
//             var option = {
//                 color:[
//                     '#00ffff', '#91cc75', '#fac858', '#ff1493', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'
//                 ],
//                 // backgroundColor: '#2c343c',
//                 textStyle:{
//                     fontSize: 16,
//                     color: "#FFFFFF",
//                     // fontStyle: 'oblique'
//                 },
//                 legend: {
//                     textStyle:{
//                         color:"#FFFFFF"
//                     }
//                 },
//                 tooltip: {
//                     trigger: 'axis',
//                     showContent: false
//                 },
//                 dataset: {
//                     source: [
//                         ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
//                         ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
//                         ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
//                         ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
//                         ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
//                     ]
//                 },
//                 xAxis: {type: 'category'},
//                 yAxis: {gridIndex: 0},
//                 grid: {top: '55%'},
//                 series: [
//                     {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'},lineStyle:{color:"#00ffff"}},
//                     {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
//                     {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
//                     {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'},lineStyle:{color:'#ff1493'}},
//                     {
//                         type: 'pie',
//                         id: 'pie',
//                         radius: '30%',
//                         center: ['50%', '25%'],
//                         emphasis: {focus: 'data'},
//                         label: {
//                             formatter: '{b}: {@2012} ({d}%)',
//                             color: "#FFFFFF"
//                         },
//                         encode: {
//                             itemName: 'product',
//                             value: '2012',
//                             tooltip: '2012'
//                         }
//                     }
//                 ]
//             };
//
//             myChart.on('updateAxisPointer', function (event) {
//                 var xAxisInfo = event.axesInfo[0];
//                 if (xAxisInfo) {
//                     var dimension = xAxisInfo.value + 1;
//                     myChart.setOption({
//                         series: {
//                             id: 'pie',
//                             label: {
//                                 formatter: '{b}: {@[' + dimension + ']} ({d}%)'
//                             },
//                             encode: {
//                                 value: dimension,
//                                 tooltip: dimension
//                             }
//                         }
//                     });
//                 }
//             });
//
//             myChart.setOption(option);
//
//         });
//     }
// })
var dom = document.getElementById("container_two");
var myChart = echarts.init(dom);
// var app = {};

var option = {
    color:[
        '#00ffff', '#91cc75', '#fac858', '#ff1493', '#316ee8', '#928ddb', '#fc8452', '#9a60b4', '#ea7ccc'
    ],
    // backgroundColor: '#2c343c',
    textStyle:{
        fontSize: 16,
        color: "#FFFFFF",
        // fontStyle: 'oblique'
    },
    legend: {
        textStyle:{
            color:"#FFFFFF"
        }
    },
    tooltip: {
        trigger: 'axis',
        showContent: false
    },
    dataset: {
        source: [
            // ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
            // ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            // ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            // ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            // ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {gridIndex: 0},
    grid: {top: '55%'},
    series: [
        {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'},lineStyle:{color:"#00ffff"}},
        {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
        {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
        {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'},lineStyle:{color:'#ff1493'}},
        {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
        {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
        {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            emphasis: {focus: 'data'},
            label: {
                // formatter: '{b}: {@2021-04-23} ({d}%)',
                color: "#FFFFFF"
            },
            encode: {
                itemName: 'product',
                // value: "2021-04-23",
                // tooltip: "2021-04-23"
            }
        }
    ]
};


setTimeout(function () {

    $.ajax({
        type: "GET",
        url:"http://106.55.57.114:8888/font/getAllCityLastWeekLevel",
        success:(res)=>{
            console.log(res)
            option.dataset.source = res;
            option.series[6].label.formatter = '{b}: {@'+res[0][1]+'} ({d}%)';
            option.series[6].encode.value = res[0][1];
            option.series[6].encode.tooltip = res[0][1];
            myChart.on('updateAxisPointer', function (event) {
                var xAxisInfo = event.axesInfo[0];
                if (xAxisInfo) {
                    var dimension = xAxisInfo.value + 1;
                    myChart.setOption({
                        series: {
                            id: 'pie',
                            label: {
                                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                            },
                            encode: {
                                value: dimension,
                                tooltip: dimension
                            }
                        }
                    });
                }
            });

            myChart.setOption(option);
        }
    })

});

// if (option && typeof option === 'object') {
//     myChart.setOption(option);
// }
